<script setup>
import { Upload } from '@element-plus/icons-vue'

const arr = [
  {
    name: 'Company', subArr: [
      { subName: 'Brand Assets' },
      { subName: 'Contact Us' },
      { subName: 'Terms & Privacy' },
      { subName: 'Bug Bounty' },
    ]
  },
  {
    name: 'Community', subArr: [
      { subName: 'API Documentation' },
      { subName: 'Knowledge Base' },
      { subName: 'Network Status' },
    ]
  },
  {
    name: 'Products & Services', subArr: [
      { subName: 'Explorer-as-a-Service (EaaS)' },
      { subName: 'Priority Support' },
      { subName: 'Blockscan' }
    ]
  }
]

const scrollToTop = () => window.scrollTo({
  top: 0,
  behavior: 'smooth'
});
</script>

<template>
  <div class="tok_foot">
    <div class="container">
      <div class="twitter">
        <div>
          <img src="../assets/img/x.svg" />
          (Twitter)
        </div>
        <div @click="scrollToTop">
          <el-icon>
            <Upload />
          </el-icon>
          Back To Top
        </div>
      </div>


      <div class="tok_foot_top ">
        <div class="tok_left">
          <!-- <img src="../assets/logo.png" /> -->
          <div class="foot_logo">
            <img src="../assets/img/logoB.svg" />
            <h3>Powered by Tok Chain</h3>
          </div>

          <p>Tok Chain is a Block Explorer and Analytics Platform for Tok Chain, a
            decentralized smart contracts platform.</p>
          <div class="metamask">
            <img src="../assets/img/metamask.svg" />
            <span>Add Tok Chain Network</span>
          </div>
        </div>
        <el-row>
          <el-col :md="8" :sm="8" :xs="8" justify="space-between" v-for="item in arr" :key="item.name">
            <h4>{{ item.name }}</h4>
            <ul>
              <li v-for="items in item.subArr" :key="items.subName">
                <router-link to="/">{{ items.subName }}</router-link>
              </li>
            </ul>
          </el-col>
        </el-row>
      </div>

      <div class="tok_foot_tip">
        <span>Tok Chain © 2021 (C) | Donate</span>
      </div>
    </div>
  </div>
</template>


<style lang="less" scopeds>
.tok_foot {
  color: var(--vt-c-indigo);
  background: #F8F9FA;
  font-size: 0.75rem;

  .twitter {
    font-size: 0.85rem;
    padding: 24px 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    >div {
      display: flex;
      align-items: center;
      gap: 5px;
      line-height: 16px;
      cursor: pointer;
    }

    img {
      width: 16px;
      height: 16px;
    }
  }

  .foot_logo {
    display: flex;
    align-items: center;

    img {
      width: 20px;
      margin-right: 6px;
    }

    h3 {
      font-size: 1rem;
    }
  }

  .tok_foot_tip {
    padding: 20px 0;

    i {
      color: red;
    }
  }

  .tok_foot_top {

    display: flex;
    justify-content: space-between;
    overflow: hidden;
    // width: calc(100%);
    padding: 40px 0;
    border-bottom: 1px solid #dfdfdf;
    border-top: 1px solid #dfdfdf;

    .tok_left {
      padding: 0;
      width: 30%;
    }

    .el-row {
      width: 65%;
    }
  }

  p {
    margin: 20px 0;
  }

  .metamask {
    display: inline-block;
    align-items: center;
    margin-bottom: 20px;
    background: #F2F2F7;
    padding: 5px;
    border-radius: 4px;
    vertical-align: middle;
    cursor: pointer;
    transition: .5s;

    img {
      vertical-align: middle;
      display: inline-block;
      padding-right: 5px;
    }

    span {
      vertical-align: middle;
      display: inline-block;
    }
  }

  .metamask:hover {
    background: #ddd;
  }

  div {
    h4 {
      padding-bottom: 15px;
      border-bottom: 1px solid rgba(231, 234, 243, .2);
      font-size: 0.85rem;
    }
  }

  ul {
    li {
      a {
        color: #202632;
        margin-bottom: 10px;

      }
    }
  }
}

@media (max-width:1000px) {
  .tok_foot {
    .tok_foot_top {
      flex-direction: column;

      .tok_left,
      .el-row {
        width: 100%;
      }
    }
  }

}
</style>
